<template>
	<view class="time-page">
		<image class="time-page__bg" src="/static/images/bg/time.png" mode=""></image>
		<view class="time-page__button-group">
			<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
			<picker-view v-if="visible" :mask-style="{background: 'transparent'}" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
			<image class="time-page__btn" src="/static/images/btn/complete.png" mode="" @click="onClick"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`
			}
		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			onClick() {
				// {{year}}年{{month}}月{{day}}日
				const time = `${this.year}-${this.month}-${this.day}`;
				this.$store.commit('saveTime', time);
				uni.navigateTo({
					url: `../major/major?data=${this.$store.getters.data}`,
				});
			},
		}
	}
</script>

<style lang="scss">
	.time-page {
		&__bg {
			width: 100vw;
			height: imageSize(100vw, 750, 2031);
		}

		&__button-group {
			// background: #FFFFFF;
			text-align: center;
			position: absolute;
			top: 85vw;
			padding: 5vw 0;
		}

		&__btn {
			width: 50vw;
			height: imageSize(50vw, 338, 84);
			position: absolute;
			top: 105vw;
			left: 25vw;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.uni-picker-view-mask{
		background: transparent !important;
	}
</style>
